<template>
  <div class="worker-detail-wrapper">
    <el-descriptions title="基本信息">
      <el-descriptions-item v-for="item in columns" :key="item.key" class="mb-20" :label="item.label">
        <span class="gray" slot="label">{{ item.label }}</span>
        <span v-if="item.key === 'gender'">{{ workerData[item.key] | genderFilter }}</span>
        <span v-else-if="item.key === 'education'">{{ workerData[item.key] | educationFilter }}</span>
        <span v-else-if="item.datatype === 'time'">
          {{ workerData[item.key] | timeFilter(item.format) }}
        </span>
        <span v-else>{{ workerData[item.key] }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <div class="el-descriptions">
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">合同信息</div>
      </div>
      <div class="el-descriptions__body">
        <el-table
          :data="workerData.contractList"
          element-loading-text="加载中"
          border
          fit
          highlight-current-row
          slot="body"
        >
          <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
          <el-table-column label="合同名称" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.contractName }}
            </template>
          </el-table-column>
          <el-table-column label="合同创建时间" width="180" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.createdOn | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column label="截止签署时间" width="180" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.deadline | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column label="合同状态" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.status | flowStatusFilter }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleContractPreview(scope.row.contractId)">查看合同</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="el-descriptions">
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">派遣轨迹</div>
      </div>
      <div class="el-descriptions__body">
        <el-table
          :loading="sendListLoading"
          :data="sendInfo.list || []"
          element-loading-text="加载中"
          border
          fit
          highlight-current-row
        >
          <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
          <el-table-column label="用工单位" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.tenantName }}
            </template>
          </el-table-column>
          <el-table-column label="派遣开始时间" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.startTime | timeFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="派遣结束时间" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ scope.row.endTime | timeFilter }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          v-if="sendInfo.totalCount > limit"
          layout="prev, pager, next"
          :total="sendInfo.totalCount"
          @current-change="handleSendCurrentChange"
          :current-page.sync="currentPage"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getDetail } from '@common/api/worker';
import { getSendList } from '@common/api/send';
import { formatTime } from '@common/utils/time';
import { getColumns } from '@common/utils/worker';
import { GENDER, EDUCATION } from '@common/consts/worker';

export default {
  props: {
    Id: {
      type: String,
      default() {
        return '';
      },
    },
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  filters: {
    genderFilter(gender) {
      // 性别
      return gender ? GENDER.find(v => v.value === gender)?.label || '--' : '--';
    },
    educationFilter(edu) {
      // 学历
      return edu ? EDUCATION.find(v => v.value === edu)?.label || '--' : '--';
    },
    timeFilter(time) {
      if (time) return formatTime(time);
      return '--';
    },
    flowStatusFilter(status) {
      switch (status) {
        case 'INIT':
          return '待签署';
        case 'ALL':
          return '已签署';
        case 'REJECT':
          return '已拒签';
        case 'CANCEL':
          return '合同撤回';
        case 'WILLEXPIRE':
          return '合同即将过期';
        case 'DEADLINE':
          return '合同过期';
        case 'STOPPED':
          return '合同已终止';
        default:
          return '合同异常';
      }
    },
  },
  data() {
    return {
      loading: true,
      workerData: { contractList: [] },
      sendInfo: { list: [], totalCount: 0 },
      currentPage: 1,
      offset: 0,
      limit: 5,
      workerId: '',
      sendListLoading: true,
    };
  },
  computed: {
    columns() {
      return getColumns(['name', 'mobile', 'gender', 'age', 'idcardNo', 'education', 'birthPlace', 'address']);
    },
  },
  created() {
    const { workerId } = this.$route.params;
    this.workerId = workerId;
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // const res = await getDetail(param);
      // const sendList = await
      const [detailRes, sendRes] = await Promise.all([
        getDetail({ Id: this.workerId }),
        getSendList({
          limit: this.limit,
          offset: this.offset,
          workerId: this.workerId,
          needTenantInfo: true,
        }),
      ]);
      if (detailRes?.data?.worker) {
        this.workerData = { ...detailRes.data.worker };
        // this.sendInfo = {
        //   list: sendRes?.data?.list || [],
        //   totalCount: sendRes?.data?.totalCount || 0,
        // };
        this.$set(this, 'sendInfo', {
          list: sendRes?.data?.list || [],
          totalCount: sendRes?.data?.totalCount || 0,
        });
      } else {
        this.workerData = { contractList: [] };
      }
      this.sendListLoading = false;
      this.loading = false;
    },
    // 查看合同
    handleContractPreview(flowId) {
      if (flowId) {
        // const res = getExternalLink
        this.$router.push({
          path: `/contract/detail/${flowId}`,
        });
      } else {
        this.$$message({
          message: '暂不支持查看',
          type: 'warning',
        });
      }
    },
    onCancel() {
      this.$emit('detailHide');
    },
    // 派遣记录分页
    async handleSendCurrentChange(data) {
      this.listLoading = true;
      this.offset = (data - 1) * this.limit;
      this.currentPage = data;
      const sendInfo = await getSendList({
        offset: this.offset,
        limit: this.limit,
        needTenantInfo: true,
        workerId: this.workerId,
      });
      this.$set(this, 'sendInfo', { list: sendInfo.list });
    },
  },
};
</script>
<style scoped lang="scss">
.worker-detail-wrapper {
  padding: 20px;
  .el-descriptions {
    margin-bottom: 20px;
  }
  .el-descriptions-item__content {
    color: #000;
  }
}

.gray {
  color: #797979;
}

.mb-20 {
  margin-bottom: 20px;
}
</style>
